<template>
  <div class="w-[100%] h-[100%]">


    <div
      class="w-[100%] h-[48px] bg-[rgba(255,78,0,0.04)] pl-[20px] flex items-center text-[#FF4E00]">
      <Icon icon="ep:bell-filled" color="#FF4E00"/>
      <span
        class="ml-[10px]">配送说明:主要用于在落地页上物流方式的配送时效性，健远地区时效、运费等情况的说明 <span
        class="text-[#3721FF] cursor-pointer">查看示例</span></span>
    </div>

    <div class="mt-[30px]">
      <el-button type="primary" color="#3721FF" round @click="handleBtnClick({ type:'add' })">+
        新增
      </el-button>

    </div>


    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
      >
        <template #cover="{row}">
          <ImagePreview :src="row.cover"/>
        </template>
        <template #sku="{row}">
          <div>
            <div>{{ row.spec }}/</div>
            <div>{{ row.sku }}</div>
          </div>
        </template>

        <template #name="{row}">
          <span class="text-[#3721FF] cursor-pointer" v-copyText="row.name">{{ row.name }}</span>
        </template>
        <template #productId="{row}">
          <span class="text-[#3721FF] cursor-pointer" v-copyText="row.productId">{{
              row.productId
            }}</span>
        </template>


      </QueryTable>

    </div>
    <InfoAction v-model="isShowDialog" :info="selectedRow" @confirm="handleBtnClick"/>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import InfoAction from "@/views/logistics/delivery/components/InfoAction.vue";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote} from "@/utils";
import {GlobeStateInstructionsApi} from "@/api/logistics/instruction";

const searchList: TradeOrderQueryVO[] = [
  {
    label: '订单编号',
    code: 'orderNo',
    type: 'input'
  },

  {
    label: '国家/地区',
    code: 'area',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '下单日期',
    code: 'orderTime',
    type: 'dateRange'
  },
  {
    label: '商品信息',
    code: 'shopInfo',
    type: 'input',
    placeHolder: '商品名称/商品ID/sku'
  },
  {
    label: '下单信息',
    code: 'orderInfo',
    type: 'input'
  },
  {
    label: '下单链接',
    code: 'orderLink',
    type: 'input'
  },
  {
    label: '物流单号',
    code: 'no ',
    type: 'input'
  },
  {
    label: '归属部门',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '归属人员',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '订单来源',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: 'IP',
    code: 'no',
    type: 'input'
  },
  {
    label: '留言/备注',
    code: 'message',
    type: 'input'
  },
  {
    label: '订单状态',
    code: 'status',
    type: 'select',
    options: getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)
  },
  {
    label: '是否有物流单',
    code: 'status',
    type: 'select',
    options: getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)
  },
  {
    label: '是否推物流',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '是否有效订单',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '物流状态',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '内部编码',
    code: 'no',
    type: 'input'
  },
  {
    label: '支付方式 ',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '支付单号',
    code: 'no',
    type: 'input'
  }
]
const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
]);


const th = ref([
  {
    name: '地区',
    code: 'stateName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '语言',
    code: 'language',
    type: 'date',
    search: true
  },
  {
    name: '配送说明',
    code: 'stateInstructions',
    search: false
  },
]);
const dataList = ref<PurchaseAdvice[]>([
  {
    cover: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01yVn1ZY2IpwjXQSe96_!!801089336.png",
    sku: "XXXXXXXXXX",
    spec: "自然色",
    name: "1256_世界等级阿珂（4）",
    productId: "20201109160037",
    advice: "采购建议",
    occupy: 28,
    stock: 0,
    inTransit: 0,
    noAuditInTransit: 30,
  },
  {
    cover: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01yVn1ZY2IpwjXQSe96_!!801089336.png",
    sku: "XXXXXXXXXX",
    spec: "自然色",
    name: "1256_世界等级阿珂（4）",
    productId: "20201109160037",
    advice: "采购建议",
    occupy: 28,
    stock: 0,
    inTransit: 0,
    noAuditInTransit: 30,
  }
]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {
  cover: null,
  sku: null,
  spec: null,
  name: null,
  productId: null,
  advice: null,
  occupy: null,
  stock: null,
  inTransit: null,
  noAuditInTransit: null,
}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  add({data}) {
    selectedRow.value = {};
    isShowDialog.value = true
  },
  edit({data}) {
    selectedRow.value = data.row;
    isShowDialog.value = true
  },
  delItem: throttle(async ({data: {row}}) => {
    await confirmPromote({
      content: "确认删除吗？"
    })

    await GlobeStateInstructionsApi.deleteGlobeStateInstructions(row.id)
    queryList();
  }, 1000),
  delivery: throttle(async ({data: {form}}) => {
    let option = {
      ...form,
    }
    if (form.id) {
      await GlobeStateInstructionsApi.updateGlobeStateInstructions(option)
    } else {
      await GlobeStateInstructionsApi.createGlobeStateInstructions(option)
    }
    queryList();

    //关闭弹窗
  }, 1000),
  pagination() {
    queryList();
  }
}

const queryList = async () => {
  let res = await GlobeStateInstructionsApi.getGlobeStateInstructionsPage(queryParams.value);
  dataList.value = res.list
  total.value = res.total;
}

onMounted(() => {
  queryList();
})

</script>
<style lang="scss" scoped>

</style>
